<!DOCTYPE html>

<html>
<head>
<title>jxj file uploader</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
#filesList
{
	width: 400px;
	height: 500px;
	border: #CCC 1px solid;	
}

#filesList .fileItem
{
	position:relative;
	border:#333 1px solid;
}
#filesList .label
{
	display: inline;
}
#filesList .checkbox
{
	
}
#filesList .fileItem .guage
{
	position:absolute;
	background-color:#ff0;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 100%;
	z-index:-100;
}
</style>
<script type="text/javascript">

var FileUploader = function( file )
{
	var _serverSidePath = "../com/jxj/php/fileuploader.php";
	var _this = this;
	var _file = file;
	
	this.onProgress;
	this.onComplete;
	
	this.upload = function()
	{
		// 서버에 신규 파일명을 받음 ( UI 표시해둠 )
		// 해당 파일명으로 업로드
		// 진척률에 맞도록 Progress 이벤트 발생
		
		
		var xhr = new XMLHttpRequest();
		if (xhr.upload ) {

			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				_this.onProgress( e, _file );
			}, false);

			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					if( xhr.status == 200 )
					{
						_this.onComplete( e, _file )
					}
				}
			};

			// start upload
			
			var formData = new FormData();
			formData.append('file',file);
			
			xhr.open("POST", _serverSidePath, true);
			xhr.setRequestHeader("Cache-Control", "no-cache");
			xhr.send(formData);

		}
	}
};


var _selectedFiles = [];

function onSelectFile( e )
{
	var _file = e.target.files[0];
	_selectedFiles.push( _file );
	
	var _item = createListItem( _file.name );
	var _list = document.getElementById( "filesList" );
	_list.appendChild( _item );
	
	
	// 참조
	_file.__listItem = _item;
	
	var _up 		= new FileUploader( _file );
	_up.onProgress 	= onProgress;
	_up.onComplete 	= onComplete;
	_up.upload();
}


// 파일 리스트 아이템
function createListItem( label )
{
	var _item = document.createElement( "div" );
	_item.className = "fileItem";
	
	var _check = document.createElement( "input" );
	_check.type = "checkbox";
	_check.className = "checkbox";
	_check.value = label;
	_check.checked = true;
	_check.onclick = onClickCheckBox;
	_item.appendChild( _check );
	
	var _label = document.createElement( "div" );
	_label.className = "label";
	_label.innerHTML = label;
	_item.appendChild( _label );
	
	var _guage = document.createElement( "div" );
	_guage.className	= "guage";
	_item.appendChild( _guage );

	return _item;
}
function onClickCheckBox( e )
{
	console.log( e, e.target.checked );
}


function onProgress( event, file )
{
	var ratio = event.loaded / event.total;
	console.log( ratio );
	
	var _item = file.__listItem;
	var _guage = _item.getElementsByClassName( "guage" )[0];
	_guage.style.right		= ((1-ratio)*100)+"%";
}
function onComplete( event, file )
{
	console.log( "complete", file, event.target.responeText );
	
	var _item = file.__listItem;
	var _label = _item.getElementsByClassName( "label" )[0];
	_label.innerHTML = _label.innerHTML + "(100%)";
}

window.onload = function()
{
	var _item = createListItem( "sample item.xml" );
	var _list = document.getElementById( "filesList" );
	_list.appendChild( _item );
}

</script>
</head>
<body>

<form>
  <fieldset>
    <legend>Upload File</legend>
    <input type="file" name="photo" id="photo" onChange="onSelectFile(event)">
  </fieldset>
</form>

<div id="filesList">
</div>
</body>
</html>